<template>
  <view class="news">
    <view class="news-container">
      <image :src="list.logoConfig.url"></image>
      <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" indicator-active-color="#FFF" :vertical="vertical" :circular="circular">
        <swiper-item v-for="(news, idx) in list.listConfig.list" :key="idx">
          <text>{{ news.chiild[0].val }}</text>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        indicatorDots: false,
        autoplay: true,
        interval: 2000,
        duration: 500,
        vertical: true,
        circular: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .news {
    margin-top: 30rpx;

    &-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 76rpx;
      border-top: 1rpx solid #FFF;
      padding: 0 30rpx;
      box-shadow: 0 10rpx 30rpx #FFF;

      // display: flex;
      image {
        width: 124rpx;
        height: 28rpx;
        border-right: 1rpx solid #DDD;
        padding-right: 22rpx;
      }

      .swiper {
        width: 522rpx;
        height: 100%;

        swiper-item {
          display: flex;
          align-items: center;
        }
      }
    }
  }
</style>
